import React, {Component,useState, useEffect} from 'react';
import {Row, Col, Card, Typography} from 'antd'

import { Area,Column,Bullet } from '@ant-design/plots';

const DemoArea = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    asyncFetch();
  }, []);

  const asyncFetch = () => {
    fetch('https://gw.alipayobjects.com/os/bmw-prod/360c3eae-0c73-46f0-a982-4746a6095010.json')
      .then((response) => response.json())
      .then((json) => setData(json))
      .catch((error) => {
        console.log('fetch data failed', error);
      });
  };
  const config = {
    data,
    xField: 'timePeriod',
    yField: 'value',
    height: 80,
    xAxis: false,
    yAxis: false,
  };

  return <Area {...config} />;
};

const DemoColumn = () => {
  const data = [
    {
      type: '家具家电',
      sales: 38,
    },
    {
      type: '粮油副食',
      sales: 52,
    },
    {
      type: '生鲜水果',
      sales: 61,
    },
    {
      type: '美容洗护',
      sales: 145,
    },
    {
      type: '母婴用品',
      sales: 48,
    },
    {
      type: '进口食品',
      sales: 38,
    },
    {
      type: '食品饮料',
      sales: 38,
    },
    {
      type: '家庭清洁',
      sales: 38,
    },
  ];
  const config = {
    data,
    xField: 'type',
    yField: 'sales',
    color: '#34a0e3',
    xAxis: false,
    yAxis: false,
    height: 80,
    columnWidthRatio: 0.8,
    meta: {
      type: {
        alias: '类别',
      },
      sales: {
        alias: '销售额',
      },
    },
  };
  return <Column {...config} />;
};

const DemoBullet = () => {
  const data = [
    {
      title: '满意度',
      ranges: [100],
      measures: [80],
      target: 85,
    },
  ];
  const config = {
    data,
    measureField: 'measures',
    rangeField: 'ranges',
    targetField: 'target',
    xField: 'title',
    height: 80,
    color: {
      range: '#f0efff',
      measure: '#2be8db',
      target: '#3D76DD',
    },
    xAxis: false,
    yAxis: false,
    // 自定义 legend
    legend: false,
  };
  return <Bullet {...config} />;
};

class CardCharts extends Component {
  render() {
    return (
      <>
        <Row gutter={16}>
          <Col span={6}>
            <Card>
              <Typography.Title level={5}>江西省学科建设经费</Typography.Title>
              <br/>
              {/*<span style={{fontSize: 22}}>8930</span>*/}
              <DemoArea/>
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Typography.Title level={5}>学科填报数</Typography.Title>
              <br/>
              {/*<span style={{fontSize: 22}}>930</span>*/}
              <DemoColumn/>
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Typography.Title level={5}>用户访问量</Typography.Title>
              <br/>
              {/*<span style={{fontSize: 22}}>31930</span>*/}
              <DemoArea/>
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Typography.Title level={5}>平台运营效果</Typography.Title>
              <br/>
              {/*<span style={{fontSize: 22}}>80%</span>*/}
              <DemoBullet/>
            </Card>
          </Col>
        </Row>
      </>
    );
  }
}

export default CardCharts;
